<#assign shiro=JspTaglibs["http://shiro.apache.org/tags"]>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>
        新增用户
    </title>

    <style type="text/css">
        body {
            padding: 10px 0;
        }

        div.ztree {
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 300px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: auto;
        }

        #result_id table {
            width: 100%;
        }

        #result_id table tr td:hover {
            background-color: #FF9999;
            cursor: pointer
        }
    </style>

    <link rel="stylesheet" href="/common/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" type="text/css">
    <link rel="stylesheet" href="/common/js/jquery-plugin/validate/style.css" type="text/css">
</head>
<body>
<div class="container">
    <form id="form" method="post" class="form-horizontal">
        <fieldset>
            <legend>
                新增用户
            </legend>

            <div class="form-group">
                <label class="col-md-2 control-label" for="userName">手机号:</label>

                <div class="col-md-4">
                    <input type="text" id="userName" class="form-control" name="userName" required="required"
                           placeholder="手机号">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="cnName">昵称:</label>

                <div class="col-md-4">
                    <input type="text" id="cnName" class="form-control" name="cnName" required="required">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="cnName">真名:</label>

                <div class="col-md-4">
                    <input type="text" id="trueName" class="form-control" name="trueName" required="required">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="identity">身份证:</label>

                <div class="col-md-4">
                    <input type="text" id="identity" class="form-control" name="identity"
                           required="required" maxlength="18">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="password">密码:</label>

                <div class="col-md-4">
                    <input type="password" id="password" name="password" class="form-control"
                           placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="password2">重复密码:</label>

                <div class="col-md-4">
                    <input type="password" id="password2" name="password2" class="form-control"
                           placeholder="请再次输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="email">邮箱:</label>

                <div class="col-md-4">
                    <input type="text" id="email" class="form-control"
                           placeholder="请输入邮箱">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="login_name">用户类型:</label>

                <div class="col-md-4">
                    <select id="user_type" name="user_type" class="form-control">
                        <option value=""></option>
                    <#if userTypeList??>
                        <#list userTypeList as userType>
                            <option value="${userType.getCode()?string}">${userType.getName()}</option>
                        </#list>
                    </#if>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="roleDiv">商家服务:</label>

                <#--<div class="col-md-4">-->
                    <#--<div id="workTypeDiv" class="ztree">-->

                    <#--</div>-->
                <#--</div>-->

                <div class="col-md-4">
                <select id="biz_work_type" name="biz_work_type" class="form-control">
                    <option value="1">策划师</option>
                    <option value="5">主持人</option>
                    <option value="6">摄影师</option>
                    <option value="7">化妆师</option>
                    <option value="27">摄像师</option>
                <#if workTypeList??>
                    <#list workTypeList as workType>
                        <option value="${workType.getId()?string}">${workType.getName()}</option>
                    </#list>
                </#if>
                </select>
                    </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="roleDiv">权限:</label>

                <div class="col-md-4">
                    <div id="roleDiv" class="ztree">

                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="status">描述:</label>

                <div class="col-md-4">
                    <textarea id="descn" class="form-control"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-4">
                    <button class="btn btn-primary" type="submit">保存</button>
                    <button class="btn btn-danger" onclick="window.close();">取消</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/jquery-plugin/validate/jquery.validate.1.11.1.min.js"></script>
<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function () {
            saveModify();
        }
    });

    jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称
            function (value, element, params) {     //addMethod第2个参数:验证方法，参数（被验证元素的值，被验证元素，参数）
                var exp = new RegExp(params);     //实例化正则对象，参数为传入的正则表达式
                return exp.test(value);                  //测试是否匹配
            }, "格式错误");    //addMethod第3个参数:默认错误信息

    $(function () {
        $("#form").validate({
            rules: {
                userName: {
                    required: true,
                    rangelength: [4, 12],
                    regex: "^[_a-zA-Z0-9]*$",
                    remote: {
                        url: "/user/isUser.json",
                        type: "get",
                        data: {
                            userName: function () {
                                return encodeURI($("#userName").val().trim());
                            }
                        }
                    }
                },
                password: {
                    required: true,
                    rangelength: [6, 16]
                },
                password2: {
                    required: true,
                    equalTo: "#password",
                    rangelength: [6, 16]
                }
            },
            messages: {
                userName: {
                    required: "请输入用户名",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                    regex: "用户名只能是数字、字母与下划线",
                    remote: "用户名已存在"
                },
                password: {
                    required: "请输入密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                },
                password2: {
                    required: "请再次输入密码",
                    equalTo: "两次输入的密码不一致",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                }
            },
            highlight: function (element) {
                $(element).next("label.valid").remove();
                $(element).closest('.form-group').removeClass('success').addClass('error');
            },
            unhighlight: function (element) {
                if ($(element).next("label.valid").length == 0) {
                    $(element).after("<label class='valid'/>");
                }
                $(element).closest('.form-group').removeClass('error').addClass('success');
            }
        });
    });

    $(function () {
        $.ajax({
            type: "get",
            url: "/user/getRoleTree.json",
            success: function (data) {
                var setting = {
                    check: {
                        enable: true,
                        chkboxType: { "Y": "", "N": "" }
                    },
                    view: {
                        selectedMulti: false
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "parentId"
                        },
                        key: {
                            name: "roleName"
                        }
                    },
                    callback: {
                        onCheck: function (event, treeId, treeNode) {
                            var treeObj = $.fn.zTree.getZTreeObj("roleDiv");
                            var nodes = treeObj.getNodesByFilter(function () {
                                return true;
                            }, false, treeNode);

                            for (var k in nodes) {
                                if (treeNode.checked) {
                                    treeObj.checkNode(nodes[k], false);
                                }

                                treeObj.setChkDisabled(nodes[k], treeNode.checked);
                            }
                        }
                    }
                };

                var obj = $.fn.zTree.init($("#roleDiv"), setting, data.list);
                var nodes = obj.getCheckedNodes(true);
                disableNodes(obj, nodes);
            }
        });
    });

    //禁用子节点
    function disableNodes(treeObj, nodes) {
        for (var k in nodes) {
            var treeNode = nodes[k];
            var subNodes = treeObj.getNodesByFilter(function () {
                return true;
            }, false, treeNode);

            for (var m in subNodes) {
                treeObj.setChkDisabled(subNodes[m], true);
            }
        }
    }

    //保存修改
    function saveModify() {
        var param = $("#form").serialize();

        var treeObj = $.fn.zTree.getZTreeObj("roleDiv");
//    var nodes = treeObj.getChangeCheckedNodes();
        var nodes = treeObj.getNodesByFilter(function (node) {
            return node.checked != node.checkedOld;
        }, false);

        if (nodes.length > 0) {
            var list = "[";
            for (var i = 0; i < nodes.length; i++) {
                if (i > 0) {
                    list += ",";
                }
                list += "{\"id\":" + nodes[i].id + ",\"checked\":" + nodes[i].checked + "}"
            }
            list += "]";
            param += "&roleList=" + list;
        }

        //workType
//        var treeObjW = $.fn.zTree.getZTreeObj("workTypeDiv");
//        var nodesW = treeObjW.getNodesByFilter(function (node) {
//            return node.checked != node.checkedOld;
//        }, false);
//
//        if (nodesW.length > 0) {
//            var list = "";
////            var list = "[";
//            for (var i = 0; i < nodesW.length; i++) {
////                if (i > 0) {
////                    list += ",";
////                }
////                list += "{\"id\":" + nodes[i].id + ",\"checked\":" + nodes[i].checked + "}"
//
//                if (nodesW[i].checked){
//                    list = nodesW[i].id;
//                }
//            }
////            list += "]";
//            param += "&workTypeList=" + list;
//        }


        var url = "/user/addUser.json";

        $.post(url, param, function (data) {
            if (data) {
                alert("操作成功");
                if (window.opener && window.opener.search) {
                    window.opener.search();
                }
                window.close();
            } else {
                alert("操作失败");
            }
        });
    }
</script>
</body>
</html>